<template>
  <div class="backdrop" @click.self="$emit('close')">
    <div class="modal">
      <div class="header">
        <div class="title">设置</div>
        <button class="close" @click="$emit('close')">×</button>
      </div>
      <div class="body">
        <div class="row">
          <label>保存路径</label>
          <input v-model="form.savePath" placeholder="如 C:/Downloads" />
        </div>
        <div class="row">
          <label>最大并发下载数</label>
          <input type="number" min="1" v-model.number="form.maxConcurrent" />
        </div>
        <div class="row">
          <label>全局同时下载数</label>
          <input type="number" min="1" v-model.number="form.maxActive" />
        </div>
        <div class="row">
          <label>下载速度限制 (KB/s，0=不限)</label>
          <input type="number" min="0" v-model.number="form.speedLimitKBs" />
        </div>
        <div class="row">
          <label>代理（http/https/socks）</label>
          <input v-model="form.proxy" placeholder="例如 http://127.0.0.1:7890" />
        </div>
        <div class="row">
          <label>语言</label>
          <select v-model="form.lang">
            <option value="zh-CN">简体中文</option>
            <option value="en">English</option>
          </select>
        </div>
        <div class="row">
          <label>失败最大重试次数</label>
          <input type="number" min="0" v-model.number="form.retryMax" />
        </div>
        <div class="row">
          <label>BT 完成后继续做种</label>
          <input type="checkbox" v-model="form.btKeepSeeding" />
        </div>
        <div class="row">
          <label>BT 监听端口（0=自动）</label>
          <input type="number" min="0" v-model.number="form.btListenPort" />
        </div>
      </div>
      <div class="footer">
        <button class="secondary" @click="$emit('close')">取消</button>
        <button class="primary" @click="onSave">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) }
})
const emit = defineEmits(['close','save'])
const form = reactive({
  savePath: props.modelValue.savePath || '',
  maxConcurrent: props.modelValue.maxConcurrent ?? 3,
  maxActive: props.modelValue.maxActive ?? 2,
  speedLimitKBs: props.modelValue.speedLimitKBs ?? 0,
  proxy: props.modelValue.proxy || '',
  lang: props.modelValue.lang || 'zh-CN',
  retryMax: props.modelValue.retryMax ?? 3,
  btKeepSeeding: props.modelValue.btKeepSeeding ?? false,
  btListenPort: props.modelValue.btListenPort ?? 0,
})
function onSave(){
  emit('save', { ...form })
}
</script>

<style scoped>
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: grid;
  place-items: center;
  z-index: 50;
}
.modal{
  width: 560px;
  background: #1f2d3f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.header{
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.title{ font-weight: 700; }
.close{ background: transparent; color: #fff; border: none; font-size: 20px; }
.body{ padding: 12px; display: grid; gap: 12px; }
.row{ display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: center; }
.row input, .row select{
  padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: #fff;
}
.footer{ display:flex; justify-content:flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.primary{ background: #2b4c7e; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; }
.secondary{ background: transparent; color: #e6e6e6; border: 1px solid rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 6px; }
</style>
